<template>
  <div class="item">
    <div class="item-title">
      <span style="font-family: 'Microsoft YaHei',serif" v-if="this.required">{{ this.name }}<em
        style="color: red">*</em></span>
      <span style="font-family: 'Microsoft YaHei',serif" v-else>{{ this.name }}</span>
    </div>
    <div class="content">
      <el-input v-model="input" :placeholder="placeholder" @input="handleChange"></el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "InputItem",
  data() {
    return {
      placeholder: '',
      input: ''
    }
  },
  methods: {
    handleChange() {
      this.$emit('input', this.input)
    }
  },
  props: ['name', 'required', 'value'],
  mounted() {
    this.input = value
    this.placeholder = '请输入' + name;
  }
}
</script>

<style scoped>
.item-title {
  position: relative;
  height: 40px;
}

.content {
  margin-bottom: 35px;
}
</style>
